﻿@model  DHQGHN.DAL.Common.DataPage<DHQGHN.PM0.Models.Admin.MenuInRoleModel>
@{
    ViewBag.Title = ViewBag.CurrentMenuName;
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<div class="content">
    <div class="clear"></div>
    <table style="width: 100%">
        <tr>
            <td style="height: 40px;">
                <div id="nav"><a href="/MenuInRole/Index" title="">@ViewBag.Title.ToUpper() </a></div>
            </td>
        </tr>
        <tr>
            <td style="">
                <div style="width: 90%;">
                    <div>
                        <div class=" col-md-2" style="text-align:right; padding:4px;">
                            Tên ứng dụng
                        </div>
                        <div>
                            <div class="col-md-4">
                                @Html.DropDownList("AppID", new SelectList(ViewBag.lstApp, "value", "text", 0), new { @id = "input-app-id", @name = "app-id", @class = "SelectBoxContent", @placeholder = "" })
                            </div>
                        </div>
                        <div class=" col-md-2" style="text-align:right; padding:4px;">
                            Tên vai trò
                        </div>
                        <div>
                            <div class="col-md-4">
                                @Html.DropDownList("input-role-id", new SelectList(string.Empty, "value", "text"),
                                                              "--- Chọn vai trò ---",
                                                                       new { @name = "role-id", @class = "SelectBoxContent", @placeholder = "" })
                            </div>

                        </div>                        
                    </div>
                    <div>
                        <div style="height: 10px;"></div>
                        <div class="col-md-12">
                            <div style="padding-top: 10px; text-align: center">
                                <div class="col-md-12">
                                    <span class="input-group-btn">
                                        <button type="button" id="menu-in-role-add" style="margin-left: 10px;" class="btn btn-primary"
                                                value="Thêm mới">
                                            <span class="glyphicon glyphicon-plus"></span>Gán chức năng
                                        </button>
                                      
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="menu-in-role-list" style="margin-top:10px;">
                    @{
                        Html.RenderPartial("_MenuInRoleList");
                    }
                </div>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">

    @functions{
        public string GetAntiForgeryToken()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + "," + formToken;
        }
    }

    function btnSearchClick() {
        OnCriteria(0);
    }

    
    //$('#input-app-id').change(function () {
    //    OnCriteria(0);
    //});

    $(document).ready(function () {
        $('#menu-in-role-add').bind('click', function (event) {
            if ($("#input-role-id").val() > 0) {
                functionCreate(-1, $("#input-role-id").val().trim(), $("#input-app-id").val().trim(), "Gán chức năng");
            } else {
                warning("Bạn cần chọn vai trò để thêm chức năng", "Phân chức năng cho vai trò");
            }
        });

        $('#input-role-id').change(function () {
            OnCriteria(0);
        });

        $('#input-app-id').change(function () {
            var codeName = "input-role-id";

            if ($("#input-app-id").val() == 0) {
                removeAll(codeName);
                fillDefaultValue("--- Chọn ứng dụng ---", codeName);
                preventSelect(codeName);
                OnCriteria(0);
                return;
            }

            removeAll(codeName);
            fillDefaultValue("--- Chọn ứng dụng ---", codeName);
            preventSelect(codeName);
            OnCriteria(0);

            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetListRoleByApp", "MenuInRole")', // we are calling json method
                dataType: 'json',
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                data: {
                    AppId: $('#input-app-id').val()
                },
                success: function (dataItems) {
                    fillData(codeName, dataItems);
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                },
                complete: function () {
                    rightSelect(codeName);
                }
            })
        });

        function fillData(id, dataItems) {
            var parent = $("#" + id);
            $.each(dataItems, function (i, item) {
                parent.append(
                    $('<option>', {
                        value: item.Value,
                        text: item.Text
                    }, '<option/>'));
            });
        }

        function rightSelect(ids) {
            $("#" + ids).removeAttr('disabled');
        }

        function removeAll(ids) {
            $("#" + ids).empty();
        }

        function fillDefaultValue(vals, ids) {
            $("#" + ids).append('<option value ="-1">' + vals + '</option>');
        }

        function preventSelect(ids) {
            $("#" + ids).attr('disabled', 'disabled');
        }


        function functionCreate(menuInRoleID, roleID, appID, titleForm) {
            $('#menu-in-role-model-container')
              .load("/MenuInRole/_MenuInRoleModel", { id: menuInRoleID, roleID: roleID, appID: appID }, function () {
                  $(this).dialog({
                      draggable: true,
                      modal: true,
                      resizable: false,
                      width: "50%",
                      title: titleForm,
                      maxheight: 480,
                      my: "center",
                      at: "center",
                      of: window,
                      buttons:[
                            {
                                text: "Lưu",
                                icons: {
                                    primary: "ui-icon-heart"
                                },
                                class: 'btn btn-primary',
                                click: function () {
                                    var values = getListMenuID();

                                    if (values == "") {
                                        warning("Bạn cần chọn chức năng", "Phân chức năng");
                                    }
                                    else {
                                        if (save) {
                                            var result = save();
                                            if (result) $(this).dialog('destroy');
                                        }
                                    }
                                }
                            },
                            {
                                text: "Đóng",
                                icons: {
                                    primary: "ui-icon-close"
                                },
                                class: 'btn btn-primary',
                                click: function () {                                    
                                    $(this).dialog("destroy");
                                }

                            }
                      ]
                  });
              });
        }
    });
</script>